import React, { useState, useEffect } from "react"
import "../sass/goCompile.scss"
import { useLocation, useHistory } from "react-router-dom"
// import { myFace } from "../utils/interface"
import useStore from "../context/useStore"
const GoCompile: React.FC = () => {
    let {mine} = useStore()
    let [list, setList] = useState(Object)
    const his = useHistory()
    const loc = useLocation()
    useEffect(() => {
        setList(loc.state)
    }, [loc.state])
    //退出
    function exit() {
        console.log(mine.codeOne)
        if(mine.codeOne==0){
            his.push("/index/my")
        }
    }
    function phone() {
        his.push("/login")
    }
    function setHead() {
        his.push("/pictureUpload")
    }
    function changeName(){
        his.push({
            pathname:"/changeName",
            state:{
                ...list
            }
        })
    }
    return <div className="goCompile">
        <h2><span>{"<"}</span><span>我的资料</span></h2>
        <div className="head" onClick={setHead}>
            <span>头像</span>
            <div className="div">
                <h2><img src={list&&list.avatar} alt="" /></h2>
            </div>
        </div>
        <div className="name" onClick={changeName}>
            <span>昵称</span>
            <div>
                <span>{list&&list.nickname}{" > "}</span>
            </div>
        </div>
        <div className="phone" onClick={phone}>
            <span>手机号</span>
            <div>
                <span>{list&&list.mobile}{" > "}</span>
            </div>
        </div>
        <div className="exit" onClick={exit}>
            <span>退出登录</span>
        </div>
    </div>
}
export default GoCompile